<template>
  <el-carousel :interval="3000" arrow="always" class="sweperSty" v-if="(swiperList[0] != null)">
    <el-carousel-item class="sewperItem" v-for="(item, index) in swiperList" :key="index">
      <img :src="item.drawingUrl" class="simgSty">
    </el-carousel-item>
  </el-carousel>
  <div class="searchBox flex_ard">
    <div class="flex_cen_column">
      <div>您负责谈单，剩下的交给我们</div>
      <div class="header_btn_sty" @click="goRelease">赏金发布</div>
    </div>
    <div>
      <p>当地房量</p>
      <p>平面方案设计(高定)</p>
      <p>谈单草图(SU)模型</p>
      <p>酷家乐/三维家庭等效果图制作</p>
      <p>3DMAX效果图制作</p>
      <p>深化施工图</p>
    </div>
  </div>

  <div class="main_sty">
    <div class="list_head_sty flex_btn">
      <div>最新需求 <span class="faBuSty" @click="goRelease">发布类似需求</span></div>
      <div class="flex_str" @click="goList">
        <div style="font-size: 16px;">更多</div>
        <img src="@/assets/img/more_right.png" class="mareIconSty">
      </div>
    </div>
    <div class="main_list flex_btn_wrap">
      <div class="itemSty flex_btn" v-for="(item, index) in releaseList" :key="index" @click="goDetail(item.id)">
        <div class="nameSty" :title="item.requireTitle">{{ item.requireTitle }}</div>
        <div class="time_sty">{{ item.createTime.substring(5, 10) }}</div>
      </div>
    </div>

    <div class="footerSty flex_cen">


      <el-config-provider :locale="locale">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getAllRelease()"
          @current-change="getAllRelease()" />
      </el-config-provider>
    </div>
  </div>


</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getReleaseListApi } from '@/api/index/index'
import { getSwiperApi } from '@/api/index/index'
import { piniaData } from '@/pinia/index'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
const piniaState = piniaData()
const swiperList = ref<any>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const router = useRouter()
const releaseList = ref<any>([])
const goRelease = () => {
  piniaState.$patch({
    releaseInfo: {
      id: null
    }
  })
  router.push({ name: 'Release', path: '/money/release' })
}
const goList = () => {
  router.push({ name: 'moneyList', path: '/money/list' })
}
const getAllRelease = () => {
  let params = {
    current: currentPage.value,
    size: pageSize.value,
    status: null,
    orderBy: 1
  }
  getReleaseListApi(params).then((res: any) => {
    releaseList.value = res.data.records
    total.value = res.data.total
  })
}
const goDetail = (id: number) => {
    router.push({ name: 'moneyDetail', path: '/money/detail', query: { id: id } })
}
onMounted(() => {
  getAllRelease()
})
onMounted(() => {
  getSwiperApi({ type: 3 }).then((res: any) => {
    swiperList.value = res.data
  })
})
</script>
<style scoped>
:deep(.is-active) {
  background-color: #FF9D07 !important;
}
:deep(.el-pagination__sizes) {
    display: none !important;
}
.footerSty {
  margin-top: 60px;
}

.time_sty {
  color: #A5A3B0;
}

.main_list {
  margin-top: 10px;
}

.itemSty {
  width: 46%;
  font-size: 18px;
  margin: 18px 0;
}

.nameSty {
  width: 85%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.faBuSty {
  font-size: 16px;
  color: #FFA210;
  margin-left: 10px;
}

.mareIconSty {
  width: 36px;
  height: 36px;
  margin: 0 20px;
}

.main_sty {
  width: 96%;
  background: #fff;
  min-height: 400px;
  margin-top: 30px;
  margin-left: 2%;
  padding: 30px 50px;
}

.header_btn_sty {
  border: 1px solid #fff;
  padding: 20px 40px;
  margin-top: 50px;
  border-radius: 20px;
}

.sewperItem {
  width: 100vw;
  height: 410px;
}

.iptSty {
  height: 50px;
}

.iptSty:hover {
  border: 0;
}

.sweperSty {
  height: 410px;
}

.searchBox {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100vw;
  height: 410px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}


.simgSty {
  width: 100vw;
  height: 410px;
}
</style>